<template>
	<view class="container">
		<!-- 我的 -->
		<image src="/static/mine_icons/back.png" class="back"></image>
		<uni-nav-bar :fixed="false" title="我的" background-color="transparent" :dark="true"></uni-nav-bar>
		<view class="bgcolor">
			<view class="user-info">
				<u-avatar size="93" :src="getSrc(userInfo.headerUrl)"
					@click="goto('/pages/imine/mine_userinfo/mine_userinfo')">
				</u-avatar>
				<view class="info-box">
					<text class="user-name">{{ userInfo.userName }}</text>
					<!-- <text class="user-id">{{userInfo.userId}}</text> -->
					<text class="user-id">{{ userInfo.userId }}</text>
				</view>
			</view>
		</view>
		<view class="card">
			<u-cell size="large" :iconStyle="iconStyle" title="项目管理" isLink icon="/static/mine_icons/pro.png"
				@click="goto('/pages/imine/mine_project_management/mine_project_management')">
			</u-cell>
			<u-cell size="large" :iconStyle="iconStyle" title="客服中心" isLink icon="/static/mine_icons/service.png"
				@click="goto('/pages/imine/mine_service/mine_service')">
			</u-cell>
			<u-cell size="large" :iconStyle="iconStyle" title="修改密码" isLink icon="/static/mine_icons/pwd.png"
				@click="goto('/pages/imine/mine_change_pwd/mine_change_pwd')">
			</u-cell>
		</view>
	</view>
</template>

<script>
	import _ from "lodash";
	import $C from "@/common/config.js"
	export default {
		onLoad() {
			this.checkAndLogin();
		},
		data() {
			return {
				userInfo: {},
				avatorSrc: "/static/mine_icons/avator.png",
				roleId: "",
				iconStyle: {
					width: "40rpx",
					height: "40rpx",
				},
			};
		},
		onShow() {
			this.checkAndLogin();
		},
		methods: {
			checkAndLogin() {
				console.log(uni.getStorageSync("roleId"));
				if (uni.getStorageSync("roleId") == 0) {
					this.userInfo.userName = "未登录";
					this.userInfo.userId = "-";
					this.userInfo.headerUrl = "";
				} else {
					this.init();
				}
			},
			async init() {
				const data = await uni.$H.get(
					"/user/getUserInfo", {}, {
						authCode: true,
					}
				);
				if (data.status == 0) {
					this.userInfo = uni.$u.deepClone(data.body);
					// this.userInfo.userName = "未登录";
					console.log(this.userInfo)
					// this.userInfo.userId = "-";
					// this.userInfo.headerUrl = data.body.headerUrl;
					uni.setStorageSync('phone', this.userInfo.phone)
					uni.setStorageSync('headerUrl', this.userInfo.headerUrl)
					uni.setStorageSync('userId', this.userInfo.userId)
					uni.setStorageSync('userName', this.userInfo.userName)
				} else {

				}

			},
			getSrc(src) {
				return $C.baseUrl + '/file/download?fileId=' + src
			},
			goto(url) {
				let src = uni.getStorageSync("roleId") == 0 ? "/pages/login/login" : url;
				uni.navigateTo({
					url: src,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		position: relative;

		.back {
			position: absolute;
			width: 100%;
			height: 548rpx;
			z-index: 0;
		}
	}

	.user-info {
		z-index: 1;
		display: flex;
		margin-top: 28rpx;
		margin-left: 28rpx;

		.info-box {
			z-index: 1;
			display: flex;
			flex-direction: column;
			flex-direction: row;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			margin-left: 21rpx;
			text-align: left;
			color: #ffffff;
			font-weight: 500;

			.user-name {
				font-size: 32rpx;
			}

			.user-id {
				font-size: 28rpx;
				width: 400rpx;
				overflow: hidden;
				/* #ifndef APP-NVUE */
				white-space: nowrap;
				text-overflow: ellipsis;
				/* #endif */
				/* #ifdef APP-NVUE */
				lines: 1;
				text-overflow: ellipsis;
				/* #endif */
			}
		}
	}

	.card {
		z-index: 1;
		border: 5rpx solid #efefef;
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		margin: 44rpx 30rpx 0 30rpx;
	}

	.container /deep/ .uni-navbar--border {
		border-bottom-style: none;
	}

	.container /deep/ .uni-nav-bar-text {
		font-size: 36rpx;
	}
</style>
